'use strict';
(function () {

  function jQuery(selecter) {
    return new Init(selecter)
  }

  // Init构造函数
  function Init(selecter) {
    let arr = document.querySelectorAll(selecter);
    // 循环给JQUERY实例化对象添加数字的key,每个Key对应的是一个DOM节点对象
    for (let i = 0; i < arr.length; i++) {
      this[i] = arr[i]
    }
    this.length = arr.length;
  }

  // 通过一个属性，可以指向实例化的原型对象，实现属性和方法的扩展。
  jQuery.fn = Init.prototype  //也就指向实例化jQuery对象的原型对象

  // 告诉用户，通过extend方法来扩展属性
  jQuery.extend = jQuery.fn.extend = function (obj) {
    if (typeof obj !== 'object') {
      throw new Error('obj 必须是一个对象')
    }
    for (const key in obj) {
      this[key] = obj[key]  // this指向调用extend方法的对象
    }
  }

  // 没有参数时，返回第一个匹配对象的innerHTML属性的内容。修改元素内容
  // 有参数时, 设置所有匹配对象的innerHTML属性的值。添加元素内容
  function html() {
    // console.log(this); //this指向的时JQuery实例化对象 
    if (arguments.length === 0) {
      return this[0].innerHTML;

    } else if (arguments.length === 1) {

      if (typeof arguments[0] !== 'string') {
        throw new Error('html() 只接收一个字符串参数')

      } else {
        let arr = this;
        for (let i = 0; i < arr.length; i++) {
          // console.log(arr[i]);
          arr[i].innerHTML = arguments[0];
        }
      }

    } else {
      throw new Error('html()只收一个参数')
    }
  }
  function text() {
    if (arguments.length === 0) {
      return this[0].innerText;

    } else if (arguments.length === 1) {

      if (typeof arguments[0] !== 'string') {
        throw new Error('text() 只接收一个字符串参数')
      }
      for (let i = 0; i < this.length; i++) {
        this[i].innerText = arguments[0]
      }
    } else {
      throw new Error('text()只收一个参数')
    }
  }
  // 一个css属性参数，返回第一匹配对象的该样式属性的值
  // 一css属性名，一个CSS属性值，修改所有匹配对象的css属性的值
  // {name: value,...},修改所有匹配对象的CSS属性的值
  function css() {
    let arr = arguments;
    if (arr.length === 1) {

      if (typeof arr[0] === 'string') {
        let styleValue = "";
        // 通过最终样式表来获取DOM节点对象指定CSS属性的值。
        if (document.defaultView.getComputedStyle) {
          // 现代DOM浏览器，非IE的浏览器
          // document.defaultView.getComputedStyle(dom节点对象, null).属性名
          styleValue = document.defaultView.getComputedStyle(this[0], null)[arr[0]]
        } else {
          // IE浏览器兼容性: dom节点对象。currentStyle。CSS属性名
          styleValue = this[0].currentStyle[arr[0]]
        }
        return styleValue;

      } else if (typeof arr[0] === 'object') {
        // 遍历对象的属性，给每一匹配的DOM对象添加CSS；
        let _styleObj = arr[0];
        for (let k in _styleObj) {

          // 遍历dom节点列表
          for (let i = 0; i < this.length; i++) {

            this[i].style[k] = _styleObj[k]
          }
        }
      } else {
        throw new Error('css()语法错误')
      }

    } else if (arr.length === 2) {
      let cssPropertyName = arr[0]
      let cssPRopertyValue = arr[1]

      for (let i = 0; i < this.length; i++) {
        this[i].style[cssPropertyName] = cssPRopertyValue
      }

    } else {
      throw new Error('css()参数时CSS属性名称或key,valu或{name:value,...}')
    }
  }
  // attr的参数设置和css一样
  // 一个HTML属性参数，返回第一匹配对象的该样式属性的值
  // 一HTML属性名，一个HTML属性值，修改所有匹配对象的HTML属性的值
  // {name: value,...},修改所有匹配对象的HTML属性的值
  function attr() {
    let arr = arguments
    if (arr.length === 1) {
      if (typeof arr[0] === 'string') {
        return this[0].getAttribute(arr[0])
      } else if (typeof arr[0] === 'object') {
        //  {class:'sdfsf',id:'sdfs'}
        let obj = arr[0]
        for (let key in obj) {
          let propertyName = key;
          let propertyValue = obj[key]
          for (let i = 0; i < this.length; i++) {
            this[i].setAttribute(propertyName, propertyValue)
          }
        }
      } else {
        throw new Error('attr()参数使用不正确')
      }
    } else if (arr.length === 2) {
      if (typeof arr[0] === 'string' && typeof arr[1] !== 'object' && typeof arr[1] !== 'function') {
        let propertyName = arr[0];
        let propertyValue = arr[1]
        for (let i = 0; i < this.length; i++) {
          this[i].setAttribute(propertyName, propertyValue)
        }
      } else {
        throw new Error('参数类型不正确。')
      }

    } else {
      throw new Error('attr()参数使用不正确')
    }
  }
  function on(eventName, fn) {
    for (let i = 0; i < this.length; i++) {
      // console.log(this.get(i));
      this[i].addEventListener(eventName, fn, false)
    }
  }
  function off() {
    for (let i = 0; i < this.length; i++) {
      this[i].removeEventListener(eventName, fn, false)
    }
  }
  // 获取指定的DOM节点
  function get(index) {
    let dom = null;
    for (let i = 0; i < this.length; i++) {
      if (i === index) {
        dom = this[i];
      }
    }
    return dom;
  }
  function ajax() {
    console.log('ajax');
  }
  // 扩展以上方法
  jQuery.fn.extend({ html, text, css, attr, on, off, get })
  jQuery.extend({ ajax })

  // 公开接口$, jQuery
  window.$ = window.jQuery = jQuery;
})();

// 思考： html(),text(),css(),attr(),on(),off()